<template>
  <Panel tite="商品列表">
    <!-- 查询条件 -->
    <el-form :inline="true">
      <el-form-item label="商品名">
       <el-input v-model="searchInfo.name" placeholder="请输入商品名"></el-input>
      </el-form-item>
    </el-form>
    商品类型:
    <el-select v-model="searchInfo.catgory">
      <el-option
        v-for="item in cateList"
        :key="item.id"
        :label="item.cateName"
        :value="item.cateName"
      ></el-option>
    </el-select>
    <el-button type="primary" @click="getGoodsList">查询</el-button>
    <el-table :data="goodsList">
      <el-table-column type="expand">
        <!-- 扩展的内容 -->
        <template slot-scope="scope">
          <el-row>
            <el-col :lg="12" md="6">商品名字:{{ scope.row.name }} </el-col>
            <el-col :lg="12" md="18"> 价格:{{ scope.row.price }}</el-col>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="商品名称" prop="name"> </el-table-column>
      <el-table-column label="商品分类" prop="category"> </el-table-column>
      <el-table-column label="商品价格" prop="price"> </el-table-column>
      <el-table-column label="商品图片">
        <!-- 作用域插槽 -->
        <template slot-scope="scope">
          <img
            width="50px"
            height="50px"
            :src="'http://1.15.179.44:3001' + scope.row.imgUrl"
            alt=""
            srcset=""
          />
        </template>
      </el-table-column>
      <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="edit(scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="removeAcc(scope)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      @size-change="changeSize"
      @current-change="pageChange"
      :current-page="pageinfo.currentPage"
      :page-sizes="[5, 8, 14, 20]"
      :page-size="pageinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 弹框 -->
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <!-- <span>这是一段信息</span> -->
      <GoodsForm
        type="edit"
        :defaultForm="curGoods"
        @success="success"
      ></GoodsForm>
    </el-dialog>
  </Panel>
</template>

<script>
import { clearObject } from "@/utlis/commom.js";
import { goodsListReq, catelistRrq, GoodsEdit } from "@/api/goods.api.js";
import GoodsForm from "./components/GoodsForm.vue";

export default {
  components: {
    GoodsForm,
  },
  data() {
    return {
      dialogVisible: false,
      cateList: [],
      pageinfo: {
        currentPage: 1,
        pageSize: 5,
      },
      searchInfo: {
        name: "",
        catgory: "",
      },
      total: 0,
      goodsList: [],
      // 当前点击的那一项商品
      curGoods: {},
    };
  },

  methods: {
    async getGoodsList() {
      let params = { ...this.pageinfo, ...this.searchInfo };
      clearObject(params);
      const res = await goodsListReq(params);
      console.log(res);
      this.goodsList = res.data.data;
      this.total = res.data.total;
      //   console.log(this.goodsList);
    },

    // 编辑商品
    edit(row) {
      console.log(row);
      this.dialogVisible = true;
      this.curGoods = row;
    },

    //每页条数发生改变
    changeSize(size) {
      console.log(size);
      // console.log(this.pageinfo.pageSize);
      this.pageinfo.pageSize = size;
      // console.log(this.pageinfo.pageSize );
      this.getGoodsList();
    },

    pageChange(currentPage) {
      // 改变页码
      this.pageinfo.currentPage = currentPage;
      // 重新调用getData
      this.getGoodsList();
    },

    // // 子组件校验通过，form为表单数据，传给后端的
    success(form) {
      // 编辑商品
      GoodsEdit(form).then((res) => {
        if (res.data.code === 0) {
          this.dialogVisible = false;
          // 编辑成功之后，查询一次
          this.getGoodsList();
        }
      });
    },
  },

  async created() {
    this.getGoodsList();
    const res = await catelistRrq();
    console.log(res);
    this.cateList = res.data.data;
  },
};
</script>

<style lang="less" scoped>
</style>